<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
</head>
<body>
    <button type="button" id="reset">重新开始一局游戏</button>
    <br/>
    
    <span>请输入要猜的数字：</span><input type="text" name="" id="number">
    <button type="button" id="guess">猜</button>
    <br/>
    <span>已经猜的次数：</span><span id="count">0</span>
    <br/>
    <span id="result">结果：</span>
    <script src="js/jquery.min.js"></script>
    <script>
         //生成随机数
         var num = Math.floor(Math.random()*100)+1;  //random生成0-1的数，floor进行向下取9整
         var count=0;
        

         $("#guess").click(function(){
            let guessNum =$('#number').val();
            count++;
            $('#count').text(count);


            if(num<guessNum){
                $('#result').text("猜大了");
                $('#result').css("color","red");
            }else if(num>guessNum){
                $('#result').text("猜小了");
                $('#result').css("color","red");
            }else{
                $('#result').text("猜对了");
                $('#result').css("color","green");
            } 
         });

         $('#reset').click(function(){

         });
    </script>
</body>
</html>